<template>
    <div class="body">
        <!-- 广告位 -->
        <div class="j_jypx_gg">
            <img src="../../assets/newimg/legal/list_banner3.png" alt="" />
        </div>
        <!-- 金融保险 -->
        <div class="j_title">
            <span>金融保险</span>
        </div>

        <div class="j_lstj_box">
            <!-- 选择部分 -->
            <div class="j_jrbx_nav">
                <ul class="j_jrbx_ul">
                    <li
                        @click="changeTypefn(item.financial_cate_id)"
                        :class="{
                            j_jrbx_active: activeType == item.financial_cate_id,
                        }"
                        v-for="(item, index) in legalcalssList"
                        :key="index"
                    >
                        <span>{{ item.financial_cate_name }}</span>
                    </li>
                </ul>
            </div>

            <!-- 列表部分 -->
            <div class="j_jrbx_list">
                <div
                    class="j_jrbx_ul3"
                    v-for="(item, index) in listInfo.data"
                    :key="index"
                >
                    <a class="j_jrbx_li0" href="">
                        <dl>
                            <dd>
                                <img
                                    src="../../assets/newimg/user/aaaa.jpg"
                                    alt=""
                                />
                            </dd>
                            <dt>
                                <h1>{{ item.financial_name }}</h1>
                                <h2>
                                    <span>额度 <strong>100000</strong>元</span>
                                    <i>0.03%/日</i>
                                </h2>
                                <h3>
                                    <span>{{ item.special_desc }}</span>
                                </h3>
                            </dt>
                        </dl>
                    </a>

                    <!--            <a class="j_jrbx_li1">-->
                    <!--                <dl>-->
                    <!--                    <dd>-->
                    <!--                        <img src="/template/mobile/junzhengbao/static/newimg/user/aaaa.jpg" alt="">-->
                    <!--                    </dd>-->
                    <!--                    <dt>-->
                    <!--                        <h1>南京银行</h1>-->
                    <!--                        <h2>-->
                    <!--                            <span>首年免年费</span>-->
                    <!--                            <i>立即申请</i>-->
                    <!--                        </h2>-->

                    <!--                        <h3>-->
                    <!--                            <span>最快1~3个工作日发卡</span>-->
                    <!--                            <i>已有394人申请</i>-->
                    <!--                        </h3>-->
                    <!--                    </dt>-->
                    <!--                </dl>-->
                    <!--            </a>-->
                    <!--            <a class="j_jrbx_li2">-->
                    <!--                <dl>-->
                    <!--                    <dd>-->
                    <!--                        <img src="/template/mobile/junzhengbao/static/newimg/user/aaaa.jpg" alt="">-->
                    <!--                    </dd>-->
                    <!--                    <dt>-->
                    <!--                        <h1>中国平安·非机动车综合保险</h1>-->
                    <!--                        <h2>-->
                    <!--                            <p>电动车意外伤害 <strong>10万元</strong></p>-->
                    <!--                            <p>电动车意外伤害 <strong>1万元</strong></p>-->
                    <!--                            <p>第三者人身伤害补贴 <strong>10万元</strong></p>-->
                    <!--                        </h2>-->

                    <!--                        <h3>-->
                    <!--                            <span>¥ 200.00</span>-->
                    <!--                            <i>去看看</i>-->
                    <!--                        </h3>-->
                    <!--                    </dt>-->
                    <!--                </dl>-->
                    <!--            </a>-->
                </div>
            </div>
        </div>
        <div class="zhanwei"></div>
    </div>
</template>

<script>
import { axiosPost } from '../../axios';
// import { Toast } from 'vant';
export default {
    name: '',
    data() {
        return {
            activeType: '',
            legalcalssList: [],
            listInfo: {},
        };
    },
    computed: {},
    mounted() {
        this.getlegalclass();
    },
    methods: {
        // 切换分类
        changeTypefn(type) {
            this.activeType = type;
            this.getListByType(type);
        },
        // 获取分类列表
        getlegalclass() {
            axiosPost('/api/financial/category', {}, (res) => {
                // if (res.status != 1) {
                //     return Toast({
                //         message: res.msg,
                //         duration: 2000,
                //     });
                // }
                this.legalcalssList = res.data;
                if (this.legalcalssList.length > 0) {
                    this.activeType = this.legalcalssList[0].financial_cate_id;
                    this.getListByType(
                        this.legalcalssList[0].financial_cate_id
                    );
                }
            });
        },
        // 根据分类获取列表
        getListByType(cat_id, page = 0, page_size = 10) {
            axiosPost(
                '/api/financial/lists',
                {
                    page,
                    page_size,
                    cat_id,
                },
                (res) => {
                    // console.log(res);
                    this.listInfo = res.data;
                }
            );
        },
    },
};
</script>

<style lang="less" scope>
@import url('../../assets/css/public.css');
</style>
